<template>
    <div class="detail">
        <!-- 返回上一页和分享模块 -->
        <!-- 返回上一页图标 -->
        <van-icon
            class="to-back"
            size="40"
            color="#EFEFEF"
            @click="toBack"
            name="arrow-left"
        />
        <!-- 分享图标 -->
        <van-icon
            class="share"
            size="40"
            color="#EFEFEF"
            @click="showShare = true"
            name="share-o"
        />
        <!-- 分享面板 -->
        <van-share-sheet
            v-model="showShare"
            title="立即分享给好友"
            :options="options"
            @select="onSelect"
        />
        <!-- 轮播图 -->
        <Swiper :bannerArr="gallery"></Swiper>
        <!-- 30天无忧退货模块 -->
        <div class="icon">
            <van-icon name="passed" color="darkred" />30天无忧退货
            <van-icon name="passed" color="darkred" />48小时快速退费
            <van-icon name="passed" color="darkred" />满88元免邮费
        </div>
        <!-- 商品信息介绍 -->
        <div class="info">
            <h3>{{info.name}}</h3>
            <p>{{ info.goods_brief }}</p>
            <span>{{info.retail_price | formatMoney}}</span>
        </div>
        <!-- 商品参数 -->
        <div class="attribute">
            <h3>商品参数</h3>
            <ul>
                <li v-for="item in attribute" :key="item.id">
                    <h4>{{ item.name }}</h4>
                    <p>{{ item.value }}</p>
                </li>
            </ul>
        </div>
        <!-- 产品详情 -->
        <div class="title">
            <h3>产品详情</h3>
        </div>
        <div class="goods_desc" v-html="info.goods_desc"></div>
        <!-- 常见问题 -->
        <div class="title">
            <h3>常见问题</h3>
        </div>
        <ul class="issue">
            <li v-for="item in issue" :key="item.id">
                <h3>{{ item.question }}</h3>
                <p>{{ item.answer }}</p>
            </li>
        </ul>
        <!--相关产品  -->
        <div class="title">
            <h3>相关产品</h3>
        </div>
        <ul class="goodslist">
            <li v-for="item in goodsList" :key="item.id" @click="gotoDetail(item)">
                <img :src="item.list_pic_url" alt="">
                <p>{{item.name}}</p>
                <span>{{item.retail_price | formatMoney}}</span>
            </li>
       </ul>
        <!-- 加入购物车的底部栏 -->
        <van-goods-action>
            <van-goods-action-icon 
                :icon="isCollected ? 'star' : 'star-o'"
                :text="isCollected ? '已收藏' : '未收藏'"
                :color="isCollected ? 'darkred' : '#666'"
                @click="isCollected = !isCollected" 
            />
            <van-goods-action-icon icon="cart-o" text="购物车" :badge="badge"  @click="$router.push('/car')" />
            <van-goods-action-button type="warning" text="加入购物车" @click="addCarMaskFn" />
            <van-goods-action-button type="danger" text="立即购买" />
        </van-goods-action>
        <!-- 商品规格弹窗 -->
        <van-sku
            v-model="show"
            :sku="sku"
            :goods="goods"
            :goods-id="goodsId"
            :hide-stock="sku.hide_stock"
            @buy-clicked="onBuyClicked"
            @add-cart="onAddCartClicked"
            ref="myref"
        />
    </div>
</template>

<script>
import { getDetail , getRelatedData , addCarData , getGoodsCount } from '@/utils/http';
// 引入轮播图组件
import Swiper from '@/components/Swiper.vue';
export default {
    name: "",
    props: [""],
    data() {
        return {
            gallery: [],  // 详情页的轮播图数组
            show: false,   // 是否显示规格面板
            id: "", // 产品id，来自productList的第一个数组项中的id
            badge: 0, // 当前购物车总的商品数量
            info: {}, // 商品信息
            attribute: [], // 商品参数
            issue: [], // 常见问题
            goodsList: [], // 相关产品列表
            isCollected: false, // 是否收藏
            showShare: false,   // 是否展示分享面板
            options: [    // 分享参数
                { name: "微信", icon: "wechat" },
                { name: "微博", icon: "weibo" },
                { name: "复制链接", icon: "link" },
                { name: "分享海报", icon: "poster" },
                { name: "二维码", icon: "qrcode" },
            ],
            goods:{       // 当前的商品信息对象
                picture:'',    // 弹出的商品展示面板上当前商品的的缩略图
            },  
            goodsId:'', // 当前商品的id
            sku:{
                // 商品数据
                tree: [],
                price: "1.00", // 默认价格（单位元）
                stock_num: 227, // 商品总库存
                hide_stock: false, // 是否隐藏剩余库存
            },
        };
    },

    components: {
        Swiper,
    },

    created() {
        // console.log(this.$route);
        // console.log(this.$route.query);
        getDetail(this.$route.query).then((res)=>{
            console.log(res);
            this.gallery = res.data.data.gallery;
            // map 返回值返回一个新的数组,forEach 没有返回值
            this.gallery = this.gallery.map((item)=>{
                item.image_url = item.img_url
                return item;
            })
            // console.log(this.gallery);
            // 给当前组件上的数据分别赋值
            this.goods.picture = res.data.data.info.list_pic_url;
            this.sku.price = res.data.data.info.retail_price;
            this.sku.stock_num = res.data.data.info.goods_number;
            this.goodsId = res.data.data.info.id;
            this.id = res.data.data.productList[0].id;
            this.info = res.data.data.info;
            this.attribute = res.data.data.attribute; 
            this.issue = res.data.data.issue;
        });
        //相关产品列表接口请求
        getRelatedData({id: this.$route.query.id,}).then((res) => {
            console.log( res);
            this.goodsList = res.data.data.goodsList;
        });
            // 获取当前购物车的总的商品数量
        getGoodsCount().then((res)=>{
            // console.log(res);
            // 获取当前的商品的总数量并赋值给badge
            this.badge = res.data.data.cartTotal.goodsCount;
        })
    },

    methods: {
        toBack(){
            // 返回上一页
            this.$router.back(-1);
        },
        onSelect(option){
            this.$toast(option.name);
            // 隐藏分享面板
            this.showShare = false;
        },
        gotoDetail(item){
            // console.log(item);
            this.$router.push({'path':'/productDetail',query:{id:item.id}});
            location.reload();
        },
        addCarMaskFn(){
            // 点击加入购物车弹窗
            this.show = true;
        },
        onBuyClicked(){
            // 点击购买
            console.log("点击购买");
        },
        onAddCartClicked(){
            // 点击加入购物车
            console.log("点击加入购物车");
            // 获取当前商品面板的组件实例对象,该对象中getSkuData方法 可以获取到当前购买的商品的数量
            // console.log(this.$refs.myref.getSkuData());
            addCarData({
                goodsId: this.goodsId,
                productId: this.id,
                number: this.$refs.myref.getSkuData().selectedNum,
            }).then(res=>{
                console.log(res);
                if(res.data.errno == 0){
                    // 添加购物车成功
                    // console.log(this);
                    // 隐藏面板
                    this.show = false;
                    // 获取当前的商品的总数量并赋值给badge
                    this.badge = res.data.data.cartTotal.goodsCount;
                    this.$toast({
                        type:'success',
                        message: "已加入购物车",
                        duration: 1000,
                    });
                }else{
                    // 加入失败
                    this.$toast({
                        type: "fail",
                        message: "添加失败",
                        duration: 1000,
                    });
                }
            })
        }
    },
};
</script>
<style lang="less" scoped>
.detail{
    padding-bottom: 100px;
    .to-back {
        position: fixed;
        top: 8px;
        left: 4px;
        z-index: 7;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 50%;
    }
    .share {
        position: fixed;
        top: 8px;
        right: 4px;
        z-index: 7;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 50%;
    }
    .icon{
        padding-top: 10px;
        font-size: 16px;
        color: black;
    }
    .info {
        background: #fff;
        text-align: center;
        padding: 5px 0;
        h3 {
            font-weight: normal;
            font-size: 10px;
            line-height: 18px;
        }
        p {
            color: #999;
            font-size: 8px;
            line-height: 14px;
        }
        span {
            display: block;
            color: darkred;
            font-size: 8px;
            line-height: 14px;
        }
    }
    .attribute {
        margin-top: 5px;
        background: #fff;
        padding: 5px 4%;
        h3 {
            margin-bottom: 10px;
            font-size: 13px;
        }
        ul {
            li {
                font-size: 16px;
                color: black;
                background: #efefef;
                line-height: 20px;
                height: 20px;
                margin-bottom: 5px;
                border-radius: 4px;
                display: flex;
                justify-content: space-between;
                h4 {
                    width: 30%;
                    text-align: right;
                }
                p {
                    flex: 1;
                    padding-left: 5px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }
    }
    .title {
        width: 100%;
        background: #fff;
        height: 20px;
        position: relative;
        &::before {
            content: "";
            width: 50%;
            height: 2px;
            background: #ccc;
            position: absolute;
            top: 50%;
            margin-top: -1px;
            left: 50%;
            margin-left: -25%;
        }
        h3 {
            width: 30%;
            position: relative;
            background: #fff;
            text-align: center;
            margin: 0 auto;
            height: 20px;
            line-height: 20px;
            font-size: 16px;
            color: black;
        }
    }
    .issue {
        padding: 0 4%;
        background: #fff;
        li {
            h3 {
                font-size: 15px;
                color: black;
                height: 20px;
                line-height: 20px;
                padding-left: 8px;
                position: relative;
                &::before {
                    content: "";
                    width: 4px;
                    height: 4px;
                    background: darkred;
                    display: inline-block;
                    position: absolute;
                    left: 0;
                    top: 50%;
                    margin-top: -2px;
                }
            }
            p {
                font-size: 6px;
                line-height: 12px;
                padding-left: 8px;
            }
        }
    } 
    .goodslist{
        display: flex;
        flex-wrap: wrap;
        li{
            text-align: center;
            width: 50%;
            padding: 3px;
            box-sizing: border-box;
            img{
                width: 100%;
                display: block;
            }
            p{
                font-size: 16px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            span{
                font-size: 16px;
                color: #8b0000;
            }
        }
    }
    /deep/.goods_desc { 
        img {
            width: 100%;
            display: block;
        }
    }
}
</style>